import React from "react";
import PostPreview from "../PostPreview";
import remark from 'remark';
import recommended from 'remark-preset-lint-recommended';
import remarkHtml from 'remark-html';

import strip from 'strip-markdown';

class PostListing extends React.Component {
  getPostList() {
    const postList = [];
    this.props.postEdges.forEach(postEdge => {
      let content = remark()
        .use(strip).processSync(postEdge.node.content).toString();
      let pos = content.indexOf('\n');
      let maxLen = 100;
      if(pos==-1 || pos>maxLen) pos = maxLen;
      let summary = content.length<=maxLen ? content : content.substring(0,pos)+'...'
      postList.push({
        path: postEdge.node.id,
        tags: postEdge.node.tags,
        cover: postEdge.node.cover,
        title: postEdge.node.title,
        tm_create: postEdge.node.createdAt,
        tm_update: postEdge.node.updatedAt,
        excerpt:summary
      });
    });
    return postList;
  }
  render() {
    const postList = this.getPostList();
    return (
      <div className="md-grid md-grid--no-spacing md-cell--middle">
        <div className="md-grid md-cell--8 mobile-fix">
          {postList.map(post => (
            <PostPreview key={post.title} postInfo={post} />
          ))}
        </div>
      </div>
    );
  }
}

export default PostListing;
